<template>
  <div>
    <van-sticky>
      <div class="search-box">
        <div class="search" @click="gosousuo">
          <div class="myimage">
            <img src="../assets/sousuo.png" alt="" class="Home-search" />
          </div>
          <div class="sousuo">搜索</div>
        </div>
      </div>
      <van-tabs v-model="active" @click = "qiehuan">
        <van-tab :title="item.name" v-for="item in cate" :key="item._id">
        </van-tab>
      </van-tabs>
    </van-sticky>
    <div>
      <div v-for="(ezitem, index) in articleList" :key="index" class="activeList">
        <h3>{{ezitem.title}}</h3>
        <div :class="{none:ezitem.poster_type==1,oneimg:ezitem.poster_type==2,moveimg:ezitem.poster_type==3}" >
          <img :src="imgitem" alt="" v-for="(imgitem, index) in ezitem.imageSrc" :key="index">
        </div>
      </div>
    </div>

    <Menu></Menu>
  </div>
</template>

<script>
import { getfenlei, getArticleList } from "@/api/home.js";
import { Tab, Tabs } from "vant";
import Menu from "../components/menu.vue";
export default {
  name: "HomePage",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    Menu,
  },
  data() {
    return {
      active: 0,
      cate: [],
      articleList: [],
      cate_id: "",
      skip: "0",
      limit: "10",
    };
  },
  created() {
    this.getCate(),
    this.getArticle()
  },

  methods: {
    //切换分类
    qiehuan() {
      this.articleList = []
        this.cate_id = this.cate[this.active]._id,
        this.getArticle()
    },
    gosousuo() {
      this.$router.push("/Sousuo");
    },
    //获得分类
    getCate() {
       getfenlei()
       .then(res=>{
        this.cate = res.data,
        console.log(this.cate)
        this.cate_id = this.cate[this.active]._id,
        this.getArticle()
       })
    },
    //获取文章列表
    getArticle() {
        let data = {
        cate_id : this.cate_id,
        skip   :  this.skip,
        limit : this.limit
      }
      getArticleList(data)
      .then(res=>{
        this.articleList = res.data,
        console.log(this.articleList);
      })
    }
  }
};
</script>

<style>
.myimage {
  display: flex;
  justify-content: center;
}
.search-box {
  width: 100%;
  height: 60px;
  background: rgb(7, 193, 96);
  padding: 10px 50px;
}
.search {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(102, 215, 157);
  border-radius: 20px;
}
.sousuo {
  color: aliceblue;
  font-size: 17px;
}
.Home-search {
  width: 25px;
}
.Tp-nr {
  width: 100%;
}
.pinlun {
  font-size: 12px;
  color: grey;
  margin-bottom: 10px;
}
.van-tab--active {
  border-left: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.activeList {
  overflow: hidden;
}
.activeList img {
  max-width: 100%;
}
.none{
  display:none;
}
.oneimg{
   width: 50vw;
    height: 56.25vw;
   }
.moveimg img{
    width: 33vw;
    height: 56.25vw;
}
</style>